<template>
	<div class="task-item">
		<!-- 推送视频 -->
		<RemoteVideo class="remotevideolink" v-if="showRemoteVideo" :cmdId="cmdId" :clientId="clientId" :responseViewResource="responseViewResource" :remotevideourl="remotevideourl" @closeremotevideo="closeremotevideo"></RemoteVideo>
		<!-- 推送链接 -->
		<RemoteLink ref="remoteLink" class="remotelink" :responseViewResource="responseViewResource" :isPdfBusiness="isPdfBusiness" :cmdId="cmdId" :clientId="clientId" :remotelinkurl="remotelinkurl" v-if="showRemotelink" @closeremotelink="closeRemoteLink()"></RemoteLink>
		<!-- 推送合同 -->
		<PdfFile v-if="pdffile" :responseViewResource="responseViewResource" :pdffile="pdffile" :cmdId="cmdId" :clientId="clientId" @closePdfView="closePdfView"></PdfFile>
		<!-- 推送签名框 -->
		<WhiteBoard @sxqmcode="sxqmcode" :responseHandWriting="responseHandWriting" :cmdId="cmdId" :clientId="clientId" v-if="showhandsign"></WhiteBoard>
		<!-- 推送表单 -->
		<FormRemoteLink ref="formRemoteLink" class="remotelink" :formRemotelinkurl="formRemotelinkurl" :formData="formData" :responseFillForm="responseFillForm" :cmdId="cmdId" :clientId="clientId" v-if="showFormRemotelink" @closeFormRemoteLink="closeFormRemoteLink" @formSumbit="formSumbit"> </FormRemoteLink>
		<!-- 推送引导框 -->
		<GuideBox v-if="showGuideBox" @closeGuideBoxView="closeGuideBoxView" @switchCameraReplaceStream="switchCameraReplaceStream"></GuideBox>
		<!-- 推送扫码 -->
		<ScanCode ref="ScanCode" v-if="showScanCodeView" :responseViewResource="responseViewResource" :responseReadWatingData="responseReadWatingData" :showScanCodeView="showScanCodeView" :isRobot="isRobot" :camera="camera" :responseScanCode="responseScanCode" :cmdId="cmdId" :clientId="clientId" @closeScanCodeView="closeScanCodeView" @scanCodeSuccessOpenLink="scanCodeSuccessOpenLink"></ScanCode>
		<!-- 选项判断 -->
		<OptionsPage v-if="showOptions" :cmdId="cmdId" :clientId="clientId" :showOptions="showOptions" :optionsData="optionsData" :responseMakeChoice="responseMakeChoice" @confirmOptions="confirmOptions"></OptionsPage>
		<!-- 富文本 -->
		<RichText v-if="richText" :richText="richText" @close="closeRichText" />
		<!-- 汇总确认 轮播图 -->
		<ImagesPreview ref="ImagesPreview" v-if="showImagesPreview" :cmdId="cmdId" :clientId="clientId" :responseConfirm="responseConfirm" :showImagesPreview="showImagesPreview" :images="images"> </ImagesPreview>
		<!-- 信息汇总-->
		<Information v-if="showMessageSummaryView" :cmdId="cmdId" :clientId="clientId" :responseReadWatingData="responseReadWatingData" :responseViewResource="responseViewResource" :informationData="informationData" @closeMessageSummaryView="closeMessageSummaryView"></Information>
		<!-- 条形码弹窗 -->
		<Modal v-model="isShowSnCode" :title="this.$t('scanner.scanner_qu_success')" @on-cancel="cancelModalSnCode">
			{{ SnCode }}
			<div slot="footer"></div>
		</Modal>
	</div>
</template>
<script>
import ivcs from '../ivcs-sdk';
import RemoteVideo from '../components/RemoteVideo.vue';
import RemoteLink from '../components/RemoteLink.vue';
import PdfFile from '../components/PdfFile.vue';
import WhiteBoard from '../components/WhiteBoard.vue';
import FormRemoteLink from '../components/FormRemoteLink.vue';
import GuideBox from '../components/GuideBox.vue';
import ScanCode from '../components/ScanCode.vue';
import OptionsPage from '../components/OptionsPage.vue';
import RichText from '../components/RichText.vue';
import ImagesPreview from '../components/ImagePreview.vue';
import Information from '../components/InformationAggregation.vue';
import { uploadBase64Image } from '../tool/uploadFile';
export default {
	components: { RemoteVideo, RemoteLink, PdfFile, WhiteBoard, FormRemoteLink, GuideBox, ScanCode, OptionsPage, RichText, ImagesPreview, Information },
	props: {
		saveCustomerMessageData: {
			type: Function,
			default: null
		},
		streamAutoPlay: {
			type: Function,
			default: null
		},
		isAutoPlaySuccess: {
			type: Boolean,
			default: () => false
		},
		camera: {
			type: String,
			default: () => ''
		},
		isRobot: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			cmdId: '',
			clientId: '',
			isPdfBusiness: false, //是否为推送合同指令的视图
			showRemoteVideo: false, //推送视频视图
			remotevideourl: null, //推送视频url
			showRemotelink: false, //推送链接视图
			remotelinkurl: null, //推送链接url
			pdffile: null, //推送合同url
			showhandsign: false, //推送签名框视图
			showFormRemotelink: false, //表单视图隐藏显示
			formRemotelinkurl: null, //表单视图url
			formData: {}, //表单数据
			linkType: '', //qrCode二维码，''普通链接 from 表单
			showGuideBox: false, //推送引导框视图
			showScanCodeView: false, //推送扫码视图
			showOptions: false, //选项判断页面
			optionsData: [], //选项判断数据
			richText: '', // 富文本内容
			showImagesPreview: false, //汇总确认视图
			images: [], //汇总确认图片
			responseReadWatingData: {}, //响应查阅等待数据
			showMessageSummaryView: false, //信息汇总组件
			informationData: [], //信息汇总数据
			isShowSnCode: false, //条形码弹窗
			SnCode: '', //条形码结果
			taskData: this.$task.tasks
		};
	},
	created() {},
	mounted() {},
	watch: {
		taskData: {
			handler() {
				console.log(this.$task.isProcess, this.$task.tasks);
				if (!this.$task.isProcess && !this.$task.isEmpty()) {
					this.$task.isProcess = true;
					let data = this.$task.front();
					this.parseData(data);
				}
			}
		},
		isAutoPlaySuccess(newVal, oldVal) {
			console.log(newVal, oldVal);
			if (newVal === false) {
				let data = this.$task.front();
				this.parseData(data);
			}
		},
		'$store.state.sessionId'(val) {
			if (val === null) {
				this.responseAllTasks();
			}
		}
	},
	methods: {
		//解析队列数据
		parseData(data) {
			if (!data) {
				return;
			}
			let type = data.type;
			this.cmdId = data.cmdId;
			this.clientId = data.clientId;
			switch (type) {
				case 'video':
					this.opensharevideourl(data.data.url);
					break;
				case 'page':
					this.opensharelinkurl(data.data.url);
					break;
				case 'paper':
					this.gotocontract(data.data.url);
					break;
				case 'get-handwriting':
					this.handsign();
					break;
				case 'fill-form':
					this.formWirte(data.data);
					break;
				case 'show-guide-box':
					this.photoGuideBox();
					break;
				case 'get-screenshot':
					this.requestSnapShot();
					break;
				case 'get-geo-location':
					this.getgaodelocation();
					break;
				case 'scan-code':
					if (!this.isAutoPlaySuccess) {
						this.showScanCodeView = true;
						this.$task.isProcess = true;
					}
					break;
				case 'make-choice':
					this.showOptions = true;
					this.optionsData = data.data;
					break;
				case 'richtext':
					this.opensRichText(data.data.content);
					break;
				case 'confirm':
					this.images = data.data;
					if (this.images.length > 0) {
						this.showImagesPreview = true;
					}
					break;
				case 'WaitingRead':
					this.onWaitingRead(data.data);
					break;
				default:
					break;
			}
		},

		//查阅等待
		onWaitingRead(data) {
			if (data.data.type === 'bar-code') {
				this.isShowSnCode = true;
				this.SnCode = data.data.code;
				this.responseReadWatingData = { id: data.id, nodeType: data.nodeType, type: data.type, code: data.data.code };
			} else if (data.data.type === 'qr-code') {
				if (data.data.code.indexOf('http') != -1 || data.data.code.indexOf('https') != -1) {
					this.responseReadWatingData = { id: data.id, nodeType: data.nodeType, type: data.type, code: data.data.code };
					this.remotelinkurl = data.data.code;
					this.linkType = 'qrCode';
					this.showRemotelink = true;
				}
			} else if (data.type === 'messageSummary') {
				this.responseReadWatingData = { id: data.id, nodeType: data.nodeType, type: data.type };
				this.showMessageSummaryView = true;
				this.informationData = data.data;
			}
		},

		// /*打开坐席分享的视频链接
		//  * URL：sharevideourl=xxx
		//  * */
		opensharevideourl(url) {
			this.noitceSuccess(this.$t('ivcs.noticeSuccessVideo'));
			this.remotevideourl = url;
			console.log(this.remotevideourl);
			this.showRemoteVideo = true;
			this.$store.commit('setShowIM', false);
			this.streamAutoPlay();
			this.responseViewResource(
				this.cmdId,
				'done',
				undefined,
				this.clientId,
				res => {
					console.log(res, 'open video view success');
					this.$task.isProcess = false;
					this.$task.dequeue();
				},
				err => {
					console.log(err, 'open video view error');
				}
			);
		},
		/*	打开坐席分享的link链接
          	url: sharelinkurl=xxxx
            * */
		opensharelinkurl(url) {
			this.noitceSuccess(this.$t('ivcs.noticeSuccessLink'));
			this.remotelinkurl = url;
			console.log(this.remotelinkurl);
			this.showRemotelink = true;
			this.isPdfBusiness = true;
			this.$store.commit('setShowIM', false);
			this.streamAutoPlay();
			this.responseViewResource(
				this.cmdId,
				'done',
				undefined,
				this.clientId,
				res => {
					console.log(res, 'open pdf view success');
					this.$task.isProcess = false;
					this.$task.dequeue();
				},
				err => {
					console.log(err, 'open pdf view error');
				}
			);
		},
		/*查看合同*/
		gotocontract(fileurl) {
			this.$Modal.success({
				title: this.$t('ivcs.confirm'),
				content: this.$t('ivcs.agentcontract'), //'坐席邀请你查看合同文件',
				okText: this.$t('ivcs.Yes'),
				cancelText: this.$t('ivcs.No'),
				onOk: () => {
					var url = escape(loginUrl + '/ivcs/api/v1/file/stream' + '?url=' + fileurl);
					this.pdffile = 'static/pdf/web/viewer.html?file=' + url;
					console.log(this.pdffile);
					this.$store.commit('setShowIM', false);
					this.$store.commit('setPdfFile', this.pdffile);
					this.streamAutoPlay();
				},
				onCancel: () => {}
			});
		},
		// 查看富文本
		opensRichText(data) {
			this.noitceSuccess(this.$t('ivcs.noticeSuccessRichText'));
			this.richText = data;
			this.responseViewResource(
				this.cmdId,
				'done',
				undefined,
				this.clientId,
				res => {
					console.log(res, 'response rich-text done success');
				},
				err => {
					console.log(err, 'response rich-text done error');
				}
			);
			this.$task.isProcess = false;
			this.$task.dequeue();
		},
		/**
		 * 邀请手写签名
		 */
		handsign() {
			this.$Modal.success({
				title: this.$t('ivcs.confirm'),
				content: this.$t('ivcs.agentsign'),
				okText: this.$t('ivcs.Yes'),
				cancelText: this.$t('ivcs.No'),
				onOk: () => {
					this.showhandsign = true;
					this.$store.commit('setShowGuideBox', false);
					this.streamAutoPlay();
				},
				onCancel: () => {}
			});
		},
		//访客签名成功
		sxqmcode() {
			this.$task.isProcess = false;
			this.$task.dequeue();
			this.showhandsign = false;
		},
		// 获取表单数据列表
		formWirte(form) {
			this.formData = {
				url: loginUrl, //地址
				id: form.formTemplate, //表单id
				token: localStorage.getItem('customer_token'), //token
				followId: form.followId, //表单流水号
				formId: form.formId, //提交表单id
				formName: form.formName, //表单名称
				sumbitFormId: form.formId //表单提交id
			};
			this.formRemotelinkurl = `${formUrl}/?id=${this.formData.id}&token=${this.formData.token}&formId=${this.formData.formId}&url=${this.formData.url}&followId=${this.formData.followId}&hash=${new Date().getTime()}`; //拼接地址
			this.showFormRemotelink = true;
			this.linkType = 'form';
		},
		//表单提交
		formSumbit() {
			this.$task.isProcess = false;
			this.$task.dequeue();
			this.showFormRemotelink = false;
		},
		/**
		 * 推送引导框
		 */
		photoGuideBox() {
			this.$Modal.success({
				title: this.$t('ivcs.confirm'),
				content: this.$t('ivcs.agentguide'), //'坐席推送了拍摄引导框,请按照坐席提示操作',
				okText: this.$t('ivcs.Yes'),
				cancelText: this.$t('ivcs.No'),
				onOk: () => {
					this.showGuideBox = true;
					this.$store.commit('setShowGuideBox', this.showGuideBox);
					this.streamAutoPlay();
				},
				onCancel: () => {}
			});
		},
		//关闭引导框视图
		closeGuideBoxView() {
			this.$task.isProcess = false;
			this.$task.dequeue();
			this.showGuideBox = false;
			this.$store.commit('setShowGuideBox', this.showGuideBox);
		},
		//切换引导框摄像头
		switchCameraReplaceStream() {
			this.$emit('switchCameraReplaceStream');
		},

		//截图弹窗
		requestSnapShot() {
			this.$Modal.success({
				title: this.$t('ivcs.confirm'),
				content: this.$t('ivcs.snapshot'),
				okText: this.$t('ivcs.Yes'),
				cancelText: this.$t('ivcs.No'),
				onOk: () => {
					this.snapshot();
				},
				onCancel: () => {}
			});
		},

		//获取弹窗图片响应截图
		async snapshot() {
			ivcs.client.snapshotWithStream(
				async base64 => {
					let data = await uploadBase64Image(base64);
					this.responseScreenShot(
						this.cmdId,
						'done',
						data,
						this.clientId,
						res => {
							console.log(res, 'snapShot response done success');
						},
						err => {
							console.log(err, 'snapShot response done error');
						}
					);
				},
				err => {
					this.responseScreenShot(
						this.cmdId,
						'failed',
						{ reason: '截取图片失败', code: 400 },
						this.clientId,
						res => {
							console.log(res, 'snapShot response failed success');
						},
						err => {
							console.log(err, 'snapShot response failed error');
						}
					);
					console.log(err, 'snapshotWithStream api error');
				}
			);
			this.$task.isProcess = false;
			this.$task.dequeue();
		},

		/**
		 * 获取定位
		 */
		getgaodelocation() {
			// eslint-disable-next-line no-undef
			ivcs.client.requestMaplocation(
				resp => {
					const data = { address: resp.data.formattedAddress, position: resp.data.position };
					this.responseGeoLocation(
						this.cmdId,
						'done',
						data,
						this.clientId,
						res => {
							console.log(res, 'get location response done success');
						},
						err => {
							console.log(err, 'get location response done error');
						}
					);
				},
				error => {
					const data = { reason: error.reason, code: error.code };
					this.responseGeoLocation(
						this.cmdId,
						'failed',
						data,
						this.clientId,
						res => {
							console.log(res, 'get location response failed success');
						},
						err => {
							console.log(err, 'get location response failed error');
						}
					);
				}
			);
			this.$task.isProcess = false;
			this.$task.dequeue();
		},

		//扫描二维码成功弹出网页
		scanCodeSuccessOpenLink(url) {
			this.remotelinkurl = url.replace('http://', 'https://');
			this.linkType = 'qrCode';
			this.showRemotelink = true;
		},

		//成功弹窗提示
		noitceSuccess(message) {
			this.$Notice.success({
				title: this.$t('ivcs.confirm'),
				desc: message,
				duration: 2,
				top: 0
			});
		},

		//关闭信息汇总视图
		closeMessageSummaryView() {
			this.$task.isProcess = false;
			this.$task.dequeue();
			this.showMessageSummaryView = false;
		},

		// 关闭富文本
		closeRichText() {
			this.richText = '';
		},

		//关闭选项判断视图
		confirmOptions() {
			this.$task.isProcess = false;
			this.$task.dequeue();
			this.showOptions = false;
		},

		//关闭扫码视图
		closeScanCodeView(type, scanCodeType, result) {
			this.showScanCodeView = false;
			//若指令发起人为机器人则需要关闭扫码任务，人工则在查看结果后关闭扫码任务
			if (this.isRobot) {
				this.$task.isProcess = false;
				this.$task.dequeue();
			}
			//type为customer则是用户主动关闭扫码任务
			if (type === 'customer') {
				this.$task.isProcess = false;
				this.$task.dequeue();
			}
			if (scanCodeType === 'bar-code' && !this.isRobot && result) {
				this.isShowSnCode = true;
				this.SnCode = result;
			}
		},
		//关闭表单视图
		closeFormRemoteLink() {
			this.$task.isProcess = false;
			this.$task.dequeue();
			this.showFormRemotelink = false;
		},
		//关闭推送视频视图
		closeremotevideo() {
			this.showRemoteVideo = false;
		},
		//关闭推送链接视图
		closeRemoteLink() {
			this.showRemotelink = false;
			//若iframe打开为扫码url则需要关闭扫码任务
			if (this.linkType === 'qrCode' && !this.isRobot) {
				this.$task.isProcess = false;
				this.$task.dequeue();
			} else if (this.linkType === 'qrCode' && this.isRobot) {
				this.responseViewResource(
					this.cmdId,
					'done',
					this.responseReadWatingData,
					this.clientId,
					res => {
						console.log(res, 'response waiting read qr-code done success');
					},
					err => {
						console.log(err, 'response waiting read qr-code done error');
					}
				);
				this.$task.isProcess = false;
				this.$task.dequeue();
			}
		},
		//关闭推送合同视图
		closePdfView() {
			this.$task.isProcess = false;
			this.$task.dequeue();
			this.pdffile = null;
		},
		/** 访客响应推送资源 */
		responseViewResource(cmdId, status, responseData, clientId, success, error) {
			this.saveCustomerMessageData(status, 'view', responseData);
			ivcs.client.responseViewResource(cmdId, status, responseData, clientId, success, error);
		},
		/** 访客回应坐席签名 */
		responseHandWriting(cmdId, status, responseData, clientId, success, error) {
			this.saveCustomerMessageData(status, 'get-handwriting', responseData);
			ivcs.client.responseHandWriting(cmdId, status, responseData, clientId, success, error);
		},
		/** 访客响应表单 */
		responseFillForm(cmdId, status, responseData, clientId, success, error) {
			this.saveCustomerMessageData(status, 'fill-form', responseData);
			ivcs.client.responseFillForm(cmdId, status, responseData, clientId, success, error);
		},
		/** 访客回应截图 */
		responseScreenShot(cmdId, status, responseData, clientId, success, error) {
			this.saveCustomerMessageData(status, 'get-screenshot', responseData);
			ivcs.client.responseScreenShot(cmdId, status, responseData, clientId, success, error);
		},
		/** 访客回应坐席请求获取地理位置 */
		responseGeoLocation(cmdId, status, responseData, clientId, success, error) {
			this.saveCustomerMessageData(status, 'get-geo-location', responseData);
			ivcs.client.responseGeoLocation(cmdId, status, responseData, clientId, success, error);
		},
		/** 访客回应坐席请求扫码 */
		responseScanCode(cmdId, status, responseData, clientId, success, error) {
			this.saveCustomerMessageData(status, 'scan-code', responseData);
			ivcs.client.responseScanCode(cmdId, status, responseData, clientId, success, error);
		},
		/** 访客回应选项判断 */
		responseMakeChoice(cmdId, status, responseData, clientId, success, error) {
			this.saveCustomerMessageData(status, 'make-choice', responseData);
			ivcs.client.responseMakeChoice(cmdId, status, responseData, clientId, success, error);
		},
		/** 访客回应汇总确认 */
		responseConfirm(cmdId, status, responseData, clientId, success, error) {
			this.saveCustomerMessageData(status, 'confirm', responseData);
			ivcs.client.responseConfirm(cmdId, status, responseData, clientId, success, error);
		},

		//响应所有队列任务
		responseAllTasks() {
			this.$task.tasks.forEach(task => {
				let type = task.type;
				let cmdId = task.cmdId;
				let clientId = task.clientId;
				switch (type) {
					case 'video':
						this.responseViewResource(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response video failed success');
							},
							err => {
								console.log(err, 'response video failed error');
							}
						);
						break;
					case 'page':
						this.responseViewResource(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response link failed success');
							},
							err => {
								console.log(err, 'response link failed error');
							}
						);
						break;
					case 'paper':
						this.responseViewResource(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response pdf failed success');
							},
							err => {
								console.log(err, 'response pdf failed error');
							}
						);
						break;
					case 'get-handwriting':
						this.responseHandWriting(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response hand writing failed success');
							},
							err => {
								console.log(err, 'response hand writing failed error');
							}
						);
						break;
					case 'fill-form':
						this.responseFillForm(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response fill-form failed success');
							},
							err => {
								console.log(err, 'response fill-form failed error');
							}
						);
						break;
					case 'show-guide-box':
						this.responseHandWriting(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response guide-box failed success');
							},
							err => {
								console.log(err, 'response guide-box failed error');
							}
						);
						break;
					case 'get-screenshot':
						this.responseScreenShot(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response snapShot failed success');
							},
							err => {
								console.log(err, 'response snapShot failed error');
							}
						);
						break;
					case 'get-geo-location':
						this.responseGeoLocation(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response get location failed success');
							},
							err => {
								console.log(err, 'response get location failed error');
							}
						);
						break;
					case 'scan-code':
						this.responseScanCode(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response scan-code failed success');
							},
							err => {
								console.log(err, 'response scan-code failed error');
							}
						);
						break;
					case 'make-choice':
						this.responseMakeChoice(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response make-choice failed success');
							},
							err => {
								console.log(err, 'response make-choice failed error');
							}
						);
						break;
					case 'richtext':
						this.responseViewResource(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response richText failed success');
							},
							err => {
								console.log(err, 'response richText failed error');
							}
						);
						break;
					case 'confirm':
						this.responseConfirm(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response confirm failed success');
							},
							err => {
								console.log(err, 'response confirm failed error');
							}
						);
						break;
					case 'WaitingRead':
						this.responseViewResource(
							cmdId,
							'failed',
							undefined,
							clientId,
							res => {
								console.log(res, 'response waiting read failed success');
							},
							err => {
								console.log(err, 'response waiting read failed error');
							}
						);
						break;
					default:
						break;
				}
			});
		},

		//关闭条形码弹窗
		cancelModalSnCode() {
			this.isShowSnCode = false;
			this.$task.isProcess = false;
			this.$task.dequeue();
			if (this.isRobot) {
				this.responseViewResource(
					this.cmdId,
					'done',
					this.responseReadWatingData,
					this.clientId,
					res => {
						console.log(res, 'response waiting read bar-code done success');
					},
					err => {
						console.log(err, 'response waiting read bar-code done success');
					}
				);
			}
		}
	}
};
</script>
<style scoped>
.remotevideolink {
	z-index: 100;
	width: 100%;
	height: 100%;
	position: fixed;
}
.remotelink {
	z-index: 100;
	width: 100%;
	height: 100%;
	/*width: 90%;*/
	/*height: 80%;*/
	/*left: 5%;*/
	/*top:10%;*/
	position: fixed;
}
</style>
